<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>事件的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <button v-on:click="showInfo">点我提示信息，触发绑定事件</button>
      <!--注意简写不用再加冒号了-->
      <!--但是这样event会消失，VUE设计的是在标签中添加关键词占位 $event-->
      <button @click="studentId(66,$event)">点击自动传入你的序号</button>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        name: "图灵",
        //如果将事件放在data中，也会做数据代理和数据劫持。 但是没有意义，影响性能
        // showInfo(event) {
        //   alert("同学你好");
        //   console.log(event);
        // }
      },
      //methdos不会做数据代理，页面不为...并不提供getter/setter方法。  认为函数不会变化，不需要做代理。
      methods: {
        //一个参数默认为event，多个的话后面为undefine。  如果是箭头函数，则this会指向window
        showInfo(event) {
          alert("同学你好");
          console.log(event);
        },
        studentId(number, event) {
          console.log(number);
          console.log(event);
        }
      },
    });
  </script>
</html>
